<template>
  <view class="page" v-cloak>
    <!-- 地址列表 start -->
    <view class="">
      <block v-for="(item,index) in inviteList" :key="index">
        <view class="padding-lr margin-bottom bg-white" >
          <view class="padding-tb-sm" @click="handleClick(item)">
            <view class="flex align-center text-bold text-333">
              <view > {{item.name}} </view>
              <view class="margin-left">{{item.mobile}}</view>
            </view>
          </view>
          <view class="flex justify-between align-center solid-top padding-tb">
            <view class="flex align-center" @click.stop="changeStatus(item)">
              <image class="fu-block-32" :src="imgBaseUrl + 'global/checked.png'" mode="" v-if="item.is_default == 1"></image>
              <image class="fu-block-32" :src="imgBaseUrl + 'global/unchecked.png'" mode="" v-else></image>
              <text class="text-666 text-df margin-left-xs">
                {{item.is_default == 1 ? i18n['默认取货人'] : i18n['设为默认取货人'] }}
              </text>
            </view>
            <view class="flex text-666">
              <view @tap.stop="delInvite(item)">
                <text class="cuIcon-delete"></text>
                <text class="margin-left-xs"> {{ i18n['删除']}}</text>
              </view>
              <view class="margin-left" @tap.stop="edit(item)">
                <text class="cuIcon-edit"></text>
                <text class="margin-left-xs"> {{ i18n['编辑']}}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <!-- 地址列表 end -->
    <!-- 空列表展示 start -->
    <fu-empty-ui :pagingListNoListDataText="i18n['您还未添加任何地址']" v-if="inviteList.length == 0 && isInit"></fu-empty-ui>
    <!-- 空列表展示 end -->
    <!-- 底部占位 start -->
    <view class="bottom-status"></view>
    <!-- 底部占位 end -->
    <!-- 操作按钮 start -->
    <view class="bottom-action">
      <view class="height-88 line-height-88 text-center radius-100 text-white bg-theme" @click="addInvite"> {{i18n['添加提货人']}}</view>
    </view>
    <!-- 操作按钮 end -->
    <!-- 断网检测 start -->
    <fu-notwork></fu-notwork>
    <!-- 断网检测 end -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        inviteList: [], // 地址列表
        is_change: 0, // 是否开启选择地址模式
        isInit: false, // 是否是初始加载,控制数据为空时空布局组件展示与否
		themeColor:'#B82441'
      };
    },
    /**
     * @param {object} options 页面入参
     * @param {string} type = 是否需要选择地址 0:不需要 1:需要
     * @param {string} id = 已有默认选中地址 0:没有 id:下单页已选择地址
     */
    onLoad(options) {
      const { type = 0 } = options;
      this.setNavigationBarTitle(this.i18n['取货人列表'])
      this.is_change = type;
      // 获取地址列表
      this.getInviteList();
      uni.$on('refreshInviteList', () => {
        this.getInviteList();
      })
    },
    /**
     * @description 页面出栈
     */
    onUnload() {
      uni.$off('refreshInviteList');
    },
    methods: {
      /**
       * @func 获取地址列表
       */
      getInviteList() {
        this.$api.post(global.apiUrls.getUserInviteInviteList).then((res) => {
          if (res.data.code == 1) {
            this.inviteList = res.data.data;
            this.isInit = true;
          } else {
            this.$message.info(res.data.msg);
          }
        });
      },
      /**
       * @description 切换默认地址
       * @param {object} item = 地址详细信息
       */
      changeStatus(item) {
        if (item.is_default == 0) {
          this.$api.post(global.apiUrls.updateDefaultInvite, { id: item.id }).then(res => {
            if (res.data.code == 1) {
              uni.$emit('refreshInviteList');
            } else {
              this.$message.info(res.data.msg);
            }
          })
        }
      },
      /**
       * @description 地址点击事件
       * @param {object} item = 提货人详细信息
       */
      handleClick(item) {
        // 如果是提货人选择模式,返回提货人设为当前选中地址信息,否则不做操作
        if (this.is_change == 1) {
          uni.$emit("select_invite_person", item);
          uni.navigateBack();
        }
      },
      /**
       * @description 去编辑地址
       * @param {object} item = 地址对象
       */
      edit(item) {
        // 记录编辑的地址ID
        this.addInvite(item);
      },
      /**
       * @description 删除地址
       * @param {object} item = 地址对象
       * */
      delInvite(item) {
        this.$util.showModal({
          title: '提示',
          content: '确定删除该提货人?',
          confirmTextColor: this.themeColor,
          success: (result) => {
            if (result.confirm) {
              this.$api.post(global.apiUrls.postUserInviteDelInvite, { id: item.id }).then(res => {
                if (res.data.code == 1) {
                  uni.$emit('refreshInviteList');
                } else {
                  this.$message.info(res.data.msg);
                }
              });
            }
          }
        })
      },
      /**
       * @description 添加地址
       * @param {object} item = 提货人对象
       * */
      addInvite(item) {
        this.$urouter.navigateTo({
          url: '/pages/address/invite-add/index',
          params: {
            id: item && item.id || ''
          }
        })
      },
    },
  };
</script>

<style lang="scss" scoped>
  .bottom-status {
    height: 156rpx;
    height: calc(156rpx + constant(safe-area-inset-bottom));
    height: calc(156rpx + env(safe-area-inset-bottom));
  }

  .bottom-action {
    position: fixed;
    right: 32rpx;
    left: 32rpx;
    bottom: 56rpx;
    bottom: calc(56rpx + constant(safe-area-inset-bottom));
    bottom: calc(56rpx + env(safe-area-inset-bottom));
  }
</style>
